<template>
    <view class="content">
        <view class="box">
			<view class="item">
				<view>旧手机</view>
				<input type="number" v-model="tel" maxlength="11" placeholder="请输入旧手机号" class="inp">
			</view>
			<view class="item">
				<view>新手机</view>
				<input type="number" v-model="newtel" maxlength="11" placeholder="请输入新手机号" class="inp">
			</view>
			<view class="item">
				<view>验证码</view>
				<input type="text" v-model="code" placeholder="请输入验证码" class="inp">
				<view class="code" @click="$noMultipleClicks(getCode)">{{ txt }}</view>
			</view>
		</view>
		<view class="btn" @click="doSubimt">提交</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick:true,
                time: 60,
                txt: '获取验证码',
				tel: '',
				newtel: '',
				code: '',
            };
        },
        onLoad(option) {
            this.tel = option.tel
        },
        methods: {
			doSubimt() {
				if (!this.newtel) {
					this.$toast('新手机号不能为空')
					return
				}
				if (!this.$checkPhone(this.newtel)) {
					this.$toast('新手机号格式不正确')
					return
				}
				if (!this.code) {
					this.$toast('请输入验证码')
					return
				}
				
				this.$ajax('bindMobile', {
				    userToken: this.$getSync('userToken'),
					mobile: this.newtel,
					verify: this.code,
					old_mobile: this.tel,
					type: 1,//2-绑定 1-修改手机号
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						uni.$emit('EDITINFO')
						setTimeout(() => {
							this.$backT()
						},500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
            // 获取验证码
            getCode() {
                let _this = this;
                if (!_this.newtel) {
                    _this.$toast('请输入新手机号');
                    return false;
                }
                if (!_this.$checkPhone(_this.newtel)) {
                    _this.$toast('新手机号码格式不正确');
                    return false;
                }
                if (_this.time != 60) {
                    return false;
                }
                _this.$ajax('verify', {
                    mobile: _this.newtel,
					type: 1,//1-修改手机号2-注册
                }).then(ret => {
                    if (ret.status == 0) {
                        _this.txt = _this.time + 'S后可再次获取';
                        let fn = setInterval(() => {
                            _this.time--;
                            _this.txt = _this.time + 'S后可再次获取';
                            if (_this.time == 0) {
                                clearInterval(fn);
                                _this.time = 60;
                                _this.txt = '获取验证码';
                            }
                        }, 1000);
                    } else {
                        _this.$toast(ret.message);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 20rpx;
	}
	.box{
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 30rpx;
	}
	.item{
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item:last-child{
		border-bottom: none;
	}
	.inp{
		flex: 1;
		text-align: right;
		padding-left: 15rpx;
	}
	.code {
	    font-size: 26rpx;
	    color: #01b6bc;
		border: 2rpx solid #01b6bc;
		border-radius: 8rpx;
		padding: 10rpx 12rpx;
		margin-left: 10rpx;
	}
	
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}

</style>
